<template>
  <div id="map"></div>
  <NavigationBar/>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import { getWidth, getTopLeft } from 'ol/extent';
import TileLayer from 'ol/layer/Tile';
import { get as getProjection } from 'ol/proj';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import NavigationBar from "./NavigationBar.vue";

export default {
  name: 'DiXingMap',
  components: { NavigationBar },
  mounted() {
    const projection = getProjection('EPSG:3857');
    const projectionExtent = projection.getExtent();
    const size = getWidth(projectionExtent) / 256;
    const resolutions = new Array(18);
    const matrixIds = new Array(18);

    for (let z = 1; z < 19; ++z) {
      resolutions[z] = size / Math.pow(2, z);
      matrixIds[z] = z;
    }

    const webKey = 'e0544d1d5d87cd63d1f2d0338830974c'; // 替换为自己的实际密钥

    // 地形底图和注记
    const Url_1 = 'http://t0.tianditu.gov.cn/ter_c/wmts?tk=' + webKey; // 地形底图
    const Url_2 = 'http://t0.tianditu.gov.cn/cta_c/wmts?tk=' + webKey; // 地形注记

    new Map({
      target: 'map',
      layers: [

        // 地形图层
        new TileLayer({
          opacity: 1,
          source: new WMTS({
            url: Url_1,
            layer: 'ter', // 注意：地形底图图层名为 'ter'
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection: projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds,
            }),
            wrapX: true,
          }),
        }),
        new TileLayer({
          opacity: 1,
          source: new WMTS({
            url: Url_2,
            layer: 'cta', // 注意：地形注记图层名为 'cta'
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection: projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds,
            }),
            wrapX: false,
          }),
        }),

      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
  },
};
</script>

<style>
#map {
  height: 100vh;
  width: 100%;
  margin: 0;
}
</style>